<template>
  <div>
    <div class="banner" @click="handleBannerClick">
      <img class="banner-image" :src="bannerImg" />
      <div class="banner-info">
        <div class="banner-number">
          <span class="iconfont">&#xe60b;</span>11
        </div>
        <div class="banner-title">{{ sightName }}</div>
      </div>
    </div>
    <common-fade>
      <common-gallery
        @closeGallery="closeGallery"
        :imgs-list="gallaryImgs"
        v-show="isGalleryShow"
      ></common-gallery>
    </common-fade>
  </div>
</template>

<script>
import CommonGallery from "common/gallery/Gallery";
import CommonFade from "common/fade/Fade";
export default {
  name: "DetailBanner",
  components: {
    "common-gallery": CommonGallery,
    "common-fade": CommonFade
  },
  props: {
    sightName: String,
    bannerImg: String,
    gallaryImgs: Array
  },
  data() {
    return {
      isGalleryShow: false
    };
  },
  methods: {
    // 打开gallery
    handleBannerClick() {
      this.isGalleryShow = true;
    },

    // 关闭gallery
    closeGallery() {
      this.isGalleryShow = false;
    }
  }
};
</script>

<style lang="stylus" scoped>
.banner {
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 55%;
  background-color: #eee;
  position: relative;
}

.banner .banner-image {
  width: 100%;
}

.banner .banner-info {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  color: #fff;
  padding: 0 0.2rem 0.2rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
}

.banner .banner-info .banner-number {
  width: 1.2rem;
  height: 0.4rem;
  line-height: 0.4rem;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0.2rem;
  text-align: center;
  font-size: 0.24rem;
}

.banner .banner-info .banner-title {
  height: 0.6rem;
  line-height: 0.6rem;
  font-size: 0.36rem;
}
</style>
